<!--
 * @Description: 
 * @Author: shizhe
 * @Date: 2022-03-10 09:41:35
 * @LastEditTime: 2022-03-11 17:25:19
 * @LastEditors: shizhe
 * @Reference: 
-->
<template>
  <div id="paymentmodel">
    <h1>付款结算流水号</h1>
    <div style="margin-top: 18px">
      <el-select
        size="small"
        style="width: 300px"
        v-model.trim="flowId"
        placeholder="请选择该合同下的入账推送流水号"
        @change="selectChange"
      >
        <el-option v-for="item in flowOptions" :key="item.id" :label="item.bankTradeCode" :value="item.bankTradeCode">
        </el-option>
      </el-select>
      <el-button size="mini" class="commonBtn1" @click="selectFlow" style="margin-left: 20px; width: 86px">
        查询明细
      </el-button>
    </div>
    <div class="no_select" v-if="!noSelect">
      <span>流水号无效，</span>
      <span>请重新输入并查询。</span>
    </div>
    <div v-else class="pay_list">
      <h1>交易明细</h1>
      <ul>
        <li>
          <span class="li_title">付款账户</span><span class="li_con">{{ payFrom.tradeAccountCode }}</span>
        </li>
        <li>
          <span class="li_title">金额</span
          ><span class="li_con" :style="{ color: !show ? '#FA7355' : '' }">￥{{ payFrom.tradeAmount }}</span>
        </li>
        <li>
          <span class="li_title">收款账户</span><span class="li_con">{{ payFrom.bankAccountCode }}</span>
        </li>
        <li><span class="li_title">到账状态</span><span class="li_con">已到账</span></li>
        <li style="border: none">
          <span class="li_title">到账时间</span
          ><span class="li_con">{{ payFrom.tradeDate + ' ' + payFrom.tradetime }}</span>
        </li>
      </ul>
      <p v-if="!show" style="margin-top: 20px; color: #fa7355">
        请按实际支付金额重新发起结算单、注明调整金额和调整原因，再操作付款。
      </p>
      <div v-else style="height: 58px"></div>
    </div>
    <div class="footer">
      <el-button size="small" class="commonBtn" @click="closeBtn">取消</el-button>
      <el-button size="small" class="commonBtn1" @click="subBtn" :disabled="!show">确定</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    payMoney: {
      type: [String, Number],
      require: true
    },
    settlementId: {
      type: [String, Number],
      require: true
    }
  },
  data() {
    return {
      show: false,
      noSelect: false,
      flowId: '',
      flowOptions: [],
      payFrom: {}
    }
  },
  mounted() {
    this.getSelection()
  },
  methods: {
    closeBtn() {
      this.$emit('close', '')
    },
    subBtn() {
      if (!this.noSelect) {
        this.$message.error('请先查询流水号明细')
        return
      }
      this.$https({
        method: 'post',
        url: '/payOfSettlement/payConfirm',
        data: {
          bankTradeCode: this.flowId,
          id: this.settlementId
        }
      })
        .then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.$emit('close', '付款')
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    selectFlow() {
      if (!this.flowId) {
        this.$message.error('请选择流水号')
        return
      }

      this.$https({
        method: 'post',
        url: '/payOfSettlement/findDetails',
        data: {
          bankTradeCode: this.flowId
        }
      })
        .then(res => {
          if (res.code == 0) {
            this.payFrom = res.data
            this.noSelect = true
            this.show = this.payMoney == res.data.tradeAmount
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getSelection() {
      this.$https({
        method: 'post',
        url: '/payOfSettlement/payRecordNoSetId'
      })
        .then(res => {
          if (res.code == 0) {
            this.flowOptions = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    selectChange() {
      this.noSelect = false
      this.show = false
    }
  }
}
</script>
<style lang="less" scoped>
.pay_list {
  margin-top: 30px;
  ul {
    margin-top: 20px;
    border: 1px solid #ccc;
    li {
      display: flex;
      height: 32px;
      line-height: 32px;
      border-bottom: 1px solid #ccc;
    }
    .li_title {
      // display: inline-block;
      text-align: center;
      width: 143px;
      color: #2d2d2d;
      border-right: 1px solid #ccc;
      background: #f4f5f8;
      font-size: 14px;
      font-weight: 500;
      opacity: 0.7;
    }
    .li_con {
      width: 260px;
      font-size: 14px;
      font-weight: 400;
      color: #2d2d2d;
      text-align: center;
    }
  }
}
.commonFrom {
  margin-top: 7px;
  width: 88%;
  .el-form-item {
    width: 40% !important;
    margin-bottom: 7px !important;
  }
  .form-item {
    width: 100% !important;
    /deep/.el-form-item__content {
      display: flex;
    }
    .el-input {
      width: 260px;
    }
  }

  .performance_text {
    color: #999;
    font-size: 14px;
  }
  .icon-guanbianniu {
    font-size: 16px;
    cursor: pointer;
    margin-left: 10px;
  }
  .icon-guanbianniu:hover {
    color: #fa7355;
  }
}
h1 {
  font-size: 16px;
  font-weight: 500;
  color: #333;
  padding-left: 10px;
  border-left: 4px solid #fa7355;
  span {
    font-weight: normal;
    color: #999;
  }
}
.no_select {
  height: 306px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  span {
    font-size: 14px;
    font-weight: 400;
    color: #999999;
  }
}
.footer {
  .commonBtn,
  .commonBtn1 {
    width: 130px;
  }
  text-align: center;
  margin-top: 40px;
}
</style>
